<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>忘记密码</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .back-link {
            display: block;
            margin-top: 20px;
            text-align: center;
            color: #1890ff;
            text-decoration: none;
        }
        
        .back-link:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <h1>忘记密码</h1>
            <p>请输入您的邮箱地址，我们将发送重置密码链接</p>
        </div>
        <form class="login-form" id="forgotPasswordForm">
            <div class="form-group">
                <label for="email">邮箱地址</label>
                <input type="email" id="email" name="email" placeholder="请输入您的邮箱地址" required>
            </div>
            <button type="submit" class="login-button">发送重置链接</button>
        </form>
        <a href="index.html" class="back-link">返回登录</a>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const forgotPasswordForm = document.getElementById('forgotPasswordForm');
            
            forgotPasswordForm.addEventListener('submit', function(event) {
                event.preventDefault();
                
                const email = document.getElementById('email').value.trim();
                
                if (email === '') {
                    alert('请输入邮箱地址');
                    return;
                }
                
                // 验证邮箱格式
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(email)) {
                    alert('请输入有效的邮箱地址');
                    return;
                }
                
                // 模拟发送重置链接
                alert('重置密码链接已发送到您的邮箱: ' + email);
                
                // 清空表单
                forgotPasswordForm.reset();
            });
        });
    </script>
</body>
</html>
